<template>
  <view class="rol-box">
    <view class="rol">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  rightTransition: {
    type: Boolean,
    default: false
  },
  hideScrollbar: {
    type: Boolean,
    default: true
  }
})
// == style vars ==
const scrollbarDisplayValue = props.hideScrollbar ? 'none' : 'block'
const rightTransitionDisplayValue = props.rightTransition ? 'block' : 'none'
</script>

<style scoped lang="scss">
.rol-box {
  display: inline-block;
  overflow: scroll;
  flex-grow: 1;
  box-sizing: border-box;

  .rol {
    display: flex;
    align-items: center;
    height: 100%;

    /* 实现x轴实现的重要css */
    white-space: nowrap;

    > {
      display: inline-block;
    }
  }
}

.row-box::-webkit-scrollbar {
  display: v-bind(scrollbarDisplayValue);
}

.row-box::after {
  position: absolute;
  top: 0;
  right: 0;
  display: v-bind(rightTransitionDisplayValue);
  width: 30rpx;
  height: 100%;
  background: linear-gradient(to right, transparent, #fff);
  content: '';
}
</style>
